<template>
    <header>
        <div class="left">
            <h4>你好,约翰</h4>
            <p>在这里找到你喜欢的音乐</p>
        </div>
        <div class="right">
             <span class="i-clock"></span>
        </div>
    </header>
</template>

<style lang="less" scoped> 
@import '../static/less/variable.less';
header {
    width: 100%;
    height: 60px;
    // background-color: red;
    font-size: 16px;
    padding: @pad;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        h4 {
            font-size: 18px;
            // font-family: jianglingyue;
        }
        p{
            padding-top: 5px;
            color: #666;
            // font-family: qimeng;
            margin-top: 5px;
        }
    }
    .right {
        .i-clock {
            display: inline-block;
            vertical-align: middle;
            width: 40px;
            height: 40px;
            background-image: url(../static/images/History.png);
            background-size: cover;
        }
    }
}


</style>